<template>
	<!-- user_box -->
	<view class="user_box">
		<!-- 邀请好友 -->
		<view class="asice" v-if="userInfo">
			<image src="/static/image/ewm@2x.png" class="ewm" mode="widthFix" v-if="userInfo && userInfo.is_show_pay_code" @click="goFuKuanMa()"></image>
			<view class="yq" @click="shareQrcode">
				<image src="/static/image/yqhy02@2x.png" mode="widthFix"></image>
<!--				<text>邀请好友</text>-->
			</view>
		</view>

		<!-- 头像 -->
		<view class="face" v-if="isLogin">
			<image :src="avatar" mode="widthFix"></image>
			<view class="text" v-if="userInfo">
				<text class="name">{{userInfo.nickname}}</text>
				<text>{{ userInfo.identity.level_name }}</text>
				<view class="yqm">
					<text>邀请码: {{userInfo.options.user_id}}</text><text class="copy" @click="copy(userInfo.options.user_id)">复制</text>
				</view>
			</view>
		</view>

		<view class="face" v-else>
			<image :src="avatar" mode="widthFix"></image>
			<view class="text">
				<text class="name" @click="callLogin">点击登录</text>
			</view>
		</view>


		<!-- vip -->
<!--		<view class="vip">
			<view class="hhr">
				<image src="/static/image/vip@2x.png" mode="widthFix"></image>
				<text>合伙人</text>
			</view>
			<view class="text">
				<text>商家入驻、权益更多</text>
				<text>立享8大超值特权</text>
			</view>
			<view class="btn">
				<text>立即入驻</text>
			</view>
		</view>-->


		<!-- 背景 -->
		<image src="/static/images/user_bg@2x.png" class="bg"></image>


		<!-- 圆背景 -->
<!--		<image src="/static/images/yuanbg.png" mode="widthFix" class="circle"></image>-->

	</view>
</template>

<script>
    import {mapState, mapGetters} from 'vuex';
    import Vue from "@dcloudio/vue-cli-plugin-uni/packages/h5-vue";

    export default {
        name: 'app-user-center-top',
        props: {
            topStyle: String,
            topPicUrl: String,
            memberPicUrl: String,
            userNameColor: String,
            is_icon_super_vip: {
                type: String,
                default() {
                    return '0';
                }
            },
        },
        computed: {
            isLogin() {
                return this.$user.isLogin();
            },
            ...mapState({
                mall: state => state.mallConfig.mall,
                is_vip_card_user: function(state) {
                    return state.user.info && state.user.info.is_vip_card_user ? 1 : 0;
                }
            }),
            ...mapGetters({
                userCenter: 'mallConfig/getUserCenter',
                userInfo: 'user/info',
            }),
            avatar() {
                if (this.isLogin && this.userInfo) {
                    return this.userInfo.avatar;
                } else {
                    return '/static/image/user-default-avatar.png';
                }
            },
            getMemberPicUrl() {
                return this.memberPicUrl;
                // todo 此处选哪个图标待确认
                if (this.memberPicUrl) {
                    return this.memberPicUrl;
                } else {
                    return this.userInfo.identity.member_pic_url;
                }
            },
            // #ifdef H5
            isWechat: function() {
                return this.$jwx.isWechat();
            }
            // #endif
        },
        // #ifdef MP
        created() {
            if (this.isLogin) {
                this.$store.dispatch('user/info', {refresh: true});
            }
        },
        // #endif
        methods: {
           // 邀请好友
          shareQrcode() {
            uni.navigateTo({
              url: '/pages/share/qrcode/qrcode',
            });
          },
            callLogin() {
                this.$store.dispatch('user/accessToken');
				// this.$store.dispatch('user/refreshInfo');
				// this.$storage.removeStorageSync('_USER_ACCESS_TOKEN');
				// this.$storage.setStorageSync('_USER_SIGN', false);
				// uni.navigateTo({
				// 	url: '/pages/registered/sign'
				// });
            },
            goMember() {
                uni.navigateTo({
                    url: '/pages/member/index/index',
                });
            },
            goFuKuanMa() {
                uni.navigateTo({
                    url: '/plugins/teller/index/index',
                });
            },
			copy(id) {
        this.$utils.uniCopy({
          data: JSON.stringify(id),
          success() {
            uni.showToast({title: '复制成功'});
          }
        });
			},
            getUserInfo(userInfoResult) {
                // #ifdef MP-WEIXIN
                uni.getUserProfile({
                    desc: '用于完善会员资料',
                    success: (userInfoResult) => {
                        uni.login({
                            scopes: 'auth_user',
                            success(loginResult) {
                                const data = {
                                    encryptedData: userInfoResult.encryptedData,
                                    iv: userInfoResult.iv,
                                    rawData: userInfoResult.rawData,
                                    signature: userInfoResult.signature,
                                    code: loginResult.code,
                                };
                                _this.$request({
                                    url: _this.$api.passport.login,
                                    method: 'post',
                                    data: data
                                }).then(response => {
                                    uni.hideLoading();
                                    if (response.code === 0) {
                                        uni.showToast({
                                            title: '资料已更新',
                                            icon: 'none'
                                        });
                                        uni.setStorageSync('_USER_ACCESS_TOKEN', response.data.access_token);
                                    } else {
                                        return reject(response.msg);
                                    }
                                });
                            }
                        });

                    }
                });
                // #endif

                // #ifndef H5 || MP-WEIXIN
                let _this = this;
                uni.login({
                    scopes: 'auth_user',
                    success(loginResult) {
                        const data = {
                            encryptedData: userInfoResult.detail.encryptedData,
                            iv: userInfoResult.detail.iv,
                            rawData: userInfoResult.detail.rawData,
                            signature: userInfoResult.detail.signature,
                            code: loginResult.code,
                        };
                        _this.$request({
                            url: _this.$api.passport.login,
                            method: 'post',
                            data: data
                        }).then(response => {
                            uni.hideLoading();
                            if (response.code === 0) {
                                uni.showToast({
                                    title: '资料已更新',
                                    icon: 'none'
                                });
                                this.$storage.setStorageSync('_USER_ACCESS_TOKEN', response.data.access_token);
                            } else {
                                return reject(response.msg);
                            }
                        });
                    }
                });
                // #endif

                // #ifdef H5
                this.$request({
                    url: this.$api.registered.url,
                    method: 'get',
                    data: {
                        scope: 'snsapi_userinfo',
                        response_type: 'code',
                        url: `${window.location.href}`
                    }
                }).then(res => {
                    if (res.code === 0) {
                        this.$storage.setStorageSync('_USER_SIGN', true);
                        window.location.replace(res.data.url);
                    } else {
                        uni.navigateTo({
                            url: '/pages/registered/sign'
                        });
                    }
                });
                // #endif
            }
        }
    }
</script>


<style scoped lang="scss">
	page {
		background: #F3F3F3;
	}

  // user_box
  .user_box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 330rpx;
    padding: 0 32rpx;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
    overflow: hidden;


    // 背景
    .bg {
      width: 100%;
      min-height: auto;
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      z-index: -1;
    }


    // 二维码与邀请
    .asice {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      text-align: right;

      image.ewm {
        width: 40rpx;
        height: auto;
      }

      .yq {
        color: #fff;
        font-size: 24rpx;
        display: flex;
        align-items: center;
        margin-left: 40rpx;

        text {
          margin-left: 10rpx;
        }

        image {
          width: 40rpx;
          height: auto;
        }
      }
    }


    // 用户信息
    .face {
      display: flex;
      align-items: center;

      image {
        width: 136rpx;
        height: 136rpx;
        border-radius: 100px;
      }

      .text {
        margin-left: 20rpx;
        color: #fff;

        text {
          display: block;
          font-size: 26rpx;
          padding: 10rpx 0;
          box-sizing: border-box;
        }

        .name {
          font-size: 48rpx;
        }

        .yqm {
          display: flex;
          align-items: center;

          .copy {
            border: 1px #fff solid;
            border-radius: 100px;
            padding: 0 20rpx;
            box-sizing: border-box;
            margin-left: 20rpx;
          }
        }
      }
    }

    // vip
    .vip {
      background: linear-gradient(90deg, #333333 0%, #696C6B 99%);
      height: 110rpx;
      position: absolute;
      left: 32rpx;
      bottom: 0;
      right: 32rpx;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      border-radius: 10rpx 10rpx 0 0;
      padding: 20rpx 32rpx 0 32rpx;
      box-sizing: border-box;

      .hhr {
        display: flex;
        align-items: center;

        image {
          width: 26rpx;
          height: auto;
        }

        text {
          font-size: 24rpx;
          color: #DBC189;
        }
      }

      .text {
        font-size: 24rpx;
        color: #E7E1BE;

        text {
          display: block;

          &:last-of-type {
            font-size: 22rpx;
            color: #DBC189;
          }
        }
      }

      .btn {
        background: linear-gradient(90deg, #F4EDCE 0%, #F3D99E 100%);
        height: 48rpx;
        line-height: 48rpx;
        border-radius: 100px;
        color: #443015;
        font-size: 22rpx;
        padding: 0 20rpx;
        box-sizing: border-box;
      }
    }


    // circle
    .circle {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 10;
      width: 100%;
    }

  }




  // 我的订单
  .user_order {
    background: #fff;
    border-radius: 10rpx;
    box-shadow: 0px 4px 28px rgba(220, 220, 220, 0.5);
    margin: 32rpx;
    box-sizing: border-box;
    padding: 32rpx;


    // t
    .t {
      display: flex;
      justify-content: space-between;

      .big {
        font-size: 32rpx;
        color: #333;
        font-weight: bold;
      }

      .more {
        font-size: 24rpx;
        color: #666;
        display: flex;
        align-items: center;

        image {
          width: 12rpx;
          height: auto;
          margin-left: 10rpx;
        }
      }
    }


    // list
    .list {
      padding: 32rpx 0 20rpx 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 20rpx;

      image {
        width: 56rpx;
        height: auto;
        display: block;
        margin: auto;
      }

      text {
        font-size: 24rpx;
        color: #666;
        margin-top: 20rpx;
        display: block;
      }

      .list_item {
        display: block;
        text-align: center;
        position: relative;

        .badge {
          position: absolute;
          right: -10rpx;
          top: -10rpx;
          margin: auto;
          background: linear-gradient(180deg, #FCB444 0%, #FF9B4B 100%);
          border-radius: 50%;
          width: 32rpx;
          height: 32rpx;
          display: inline-block;
          color: #fff;
          z-index: 100;
          font-size: 24rpx;
          line-height: 32rpx;
        }
      }
    }


  }




  // 我的钱包
  .user_money {
    background: #fff;
    border-radius: 10rpx;
    box-shadow: 0px 4px 28px rgba(220, 220, 220, 0.5);
    margin: 32rpx;
    box-sizing: border-box;
    padding: 32rpx;


    // t
    .t {
      display: flex;
      justify-content: space-between;

      .big {
        font-size: 32rpx;
        color: #333;
        font-weight: bold;
      }

      .more {
        font-size: 24rpx;
        color: #666;
        display: flex;
        align-items: center;

        image {
          width: 12rpx;
          height: auto;
          margin-left: 10rpx;
        }
      }
    }

    .list {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 32rpx 0 20rpx 0;

      text {
        font-weight: normal;
        font-size: 24rpx;
        color: #999;
        display: block;
        text-align: center;

        &:last-of-type {
          margin-top: 20rpx;
        }
      }

      .num {
        font-size: 40rpx;
        color: #333;
        font-weight: bold;
        display: block;
        text-align: center;
      }

      .price:before {
        content: '￥';
      }
    }

  }




  // 常用功能
  .user_tool {
    background: #fff;
    border-radius: 10rpx;
    box-shadow: 0px 4px 28px rgba(220, 220, 220, 0.5);
    margin: 32rpx;
    box-sizing: border-box;
    padding: 32rpx 32rpx 100rpx 32rpx;


    // t
    .t {
      display: flex;
      justify-content: space-between;

      .big {
        font-size: 32rpx;
        color: #333;
        font-weight: bold;
      }

      .more {
        font-size: 24rpx;
        color: #666;
        display: flex;
        align-items: center;

        image {
          width: 12rpx;
          height: auto;
          margin-left: 10rpx;
        }
      }
    }

    .list {
      padding: 32rpx 0 0 0;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      justify-content: space-between;
      gap: 20rpx;

      image {
        width: 56rpx;
        height: auto;
        display: block;
        margin: auto;
      }

      text {
        font-size: 24rpx;
        color: #666;
        margin-top: 14rpx;
        display: block;
      }

      .list_item {
        display: block;
        text-align: center;
        position: relative;
        text-align: center;
        margin-bottom: 20rpx;

        text {
          text-align: center;
        }
      }
    }

    /deep/ uni-swiper .uni-swiper-wrapper {
      padding-bottom: 80rpx;
    }

  }
</style>
